<template>
	<view class="u-page">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<!-- 我的头部 -->
				<u-row customStyle="margin-bottom: 10px"  v-show=" this.token !== '' " >	
					<u-col span="2">
						<view class="u-myAvatar">
							<u-avatar :src='`http://127.0.0.1:15000/eat-service/fileManager/getImageById?id=${this.avatarId}`' @click="Personal"  shape="circle"></u-avatar>
						</view>
					</u-col>
					<u-col span="6" >
						<view class="u-myText">
							<!-- <u--text text="请去个人资料页面设置您的昵称" v-if="this.nickName === null"></u--text> -->
							<text>{{this.nickName}}</text>
						</view>
					</u-col>
					<u-col span="4">
						<u-icon name="more-circle" size="28" @click="chatGroupRoom"></u-icon>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10px"  v-show=" this.token == '' " style="padding-left: 20px;padding-top: 10px;">
					<u-col span="6">
						<view class="u-myText">
							<text @click="Login">立即登录</text>
						</view>
					</u-col>
				</u-row>
				<!-- <u-row style="width:60px;">
					
				</u-row> -->
				<!-- 会员内容 -->
				<u-row customStyle="margin-bottom: 10px" class="u-myMemberTop" @click="eatMember">
					<u-col span="6" style="height: 85px;width: 100%;">
						<view class="u-myMemberContent">
							<u--text color="#999a9a" prefixIcon="integral-fill" iconStyle="font-size: 30px" size="18px" text="白银会员"></u--text>
						</view>
						<view class="u-myMemberIntroduce">
							<u--text color="#999a9a" size="12px" text="成为会员可享.转享豆兑换.等权益"></u--text>
						</view>
						<view class="u-myMemberDetails">
							<u--text
								labelColor="#c2c3c3"
								color="#999a9a" 
								style="height: 60px;"
								iconStyle="font-size: 10px"
								align="right"
								size="10px"
								lineHeight="1.5"
								text="查看详情>">
							</u--text>
							<!-- <u--text suffixIcon="arrow-leftward" iconStyle="font-size: 18px" text="查看更多"></u--text> -->
						</view>
					</u-col>
				</u-row>
				<!-- 我的主页钱包 -->
				<u-row customStyle="margin-bottom: 10px" class="u-myWallet">
					<swiper :indicator-dots="false" class="swiper">
						<swiper-item>
							<u-grid :border="false">
								<u-grid-item
								:customStyle="{width:170+'rpx',height:94+'px'}"
								v-for="(item, index) in swiperList"
								:index="index"
								:key="index"
								>
									<u-icon
									:customStyle="{paddingTop:20+'rpx'}"
									:name="item.name"
									:size="22"
									></u-icon>
									<text class="grid-textActivity">{{item.title}}</text>
								</u-grid-item>
							</u-grid>
						</swiper-item>
					</swiper>
				</u-row>
				<!-- 我的主页活动 -->
				<u-row customStyle="margin-bottom: 10px" class="u-myActivity">
					<swiper :indicator-dots="false" class="swiper">
						<swiper-item>
							<u-grid :border="false" @click="aliasClick">
								<u-grid-item
								:customStyle="{width:170+'rpx',height:94+'px'}"
								v-for="(item, index) in swiperList"
								:index="index"
								:key="index"
								>
									<u-icon
									:customStyle="{paddingTop:20+'rpx'}"
									:name="item.name"
									:size="22"
									></u-icon>
									<text class="grid-textActivity">{{item.title}}</text>
								</u-grid-item>
							</u-grid>
						</swiper-item>
					</swiper>
				</u-row>
				<!-- 我的主页功能 -->
				<u-row customStyle="margin-bottom: 10px" class="u-myGrid" style="overflow: hidden;">
					<u-grid :border="false" col="4" style="width: 360px;">
						<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" style="width: 90px;">
							<u-icon :customStyle="{paddingTop:10+'rpx'}" :name="listItem.name" :size="22" style="overflow: hidden;margin-left: 20px;;margin-top:10px;"></u-icon>
							<text class="grid-text">{{listItem.title}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</u-row>
				<!-- <view style="width:60px;">
					<u-icon name="more-circle" size="28" label="客服" @click="chatRoom"></u-icon>
				</view> -->
				<view style="width:60px;">
					<u-icon name="more-circle" size="28" label="客服2" @click="chatRoom1"></u-icon>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import WebSocket from '@/common/websocket.js';
	import $store from '@/store/index.js';
	export default {
		data() {
			return {
				// token‘
				token:'',
				// 用户id
				id:'',
				// 用户头像
				avatarId:'',
				// 用户昵称
				nickName:'',
				
				swiperList:[{
								name:'red-packet-fill',
								title:'优惠券',
							},
							{
								name:'star',
								title:'星星',
							},
							{
								name:'hourglass',
								title:'沙漏',
							},
							{
								name:'home',
								title:'首页',
							}],
				list: [{
					name: 'photo',
					title: '图片'
					},
					{
						name: 'lock',
						title: '购物车'
					},
					{
						name: 'star',
						title: '依古比古'
					},
					{
						name: 'hourglass',
						title: '玛卡巴卡'
					},
					{
						name: 'home',
						title: '首页'
					},
					{
						name: 'wifi',
						title: 'wifi'
					},
					{
						name: 'setting',
						title: '设置'
					},
					{
						name: 'search',
						title: '查询'
					},
					{
						name: 'bell-fill',
						title: '消息'
					},
					{
						name: 'grid',
						title: '更多'
					},
					{
						name: 'thumb-up',
						title: '好评'
					},
					{
						name: 'android-fill',
						title: '安卓'
					},
					{
						name: 'camera',
						title: '拍照'
					},
					{
						name: 'star',
						title: '音量'
					},
					{
						name: 'heart',
						title: '点赞'
					},
					{
						name: 'weixin-fill',
						title: '微信'
					},
				],
			}
		},
		mounted(){
			// 头部获取token
			this.token = uni.getStorageSync('token')
			//头部获取用户id
			this.id = uni.getStorageSync('id')
			// 根据用户id查询用户信息
			this.getAllUserById()
			// 头部获取用户昵称
			// this.nickName = uni.getStorageSync('nickName')
			
		},
		methods: {
			// alias小应用被点击时触发事件
			aliasClick(name) {
				if (name === 0) {
					uni.navigateTo({
						url: '/pages/my/myCoupon'
					})
				}
			},
			// 跳转登录界面
			Login(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			//根据id查询用户信息
			getAllUserById() {
				this.$myRequest({
					url: '/eat-service/userProtal/getAllUserById',
					method: 'get',
					data: {
						id: this.id,
					}
				}).then(res => {
					this.nickName = res.data.obj.obj.nickName
					this.avatarId = res.data.obj.obj.avatarId
					// this.nickName.push(res.data.obj.nickName)
					console.log(this.nickName)
				})
			},
			// 跳转个人资料页面
			Personal(){
				uni.navigateTo({
					url:'/pages/personal/personal'
				})
			},
			//跳转会员页面
			eatMember(){
				uni.navigateTo({
					url:'/pages/member/member'
				})
			},
			//跳转公共聊天页面
			chatGroupRoom(){
				if(this.token !== ''){
					uni.navigateTo({
						url:'/pages/chat/myChat',
					})
					// $store.state.toUId = 2
				} else {
					// 跳转登录页面
					this.Login()
				}
				
			},
			chatRoom(){
				if(this.token !== ''){
					uni.navigateTo({
						url:"/pages/chat/chatRoom?id=" + 4
					})
				} else {
					// 跳转登录页面
					this.Login()
				}
				// WebSocket.connectSocketInit();
			},
			chatRoom1(){
				uni.navigateTo({
					url:'/pages/chat/chat',
				})
				// WebSocket.connectSocketInit();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		margin: 0 auto;
		width: 390px;
		height: 75px;
	}
	.u-myWallet{
		width: 94%;
		margin: 0 auto;
		height: 90px;
		background-color: white;
		border-radius: 10px 10px 10px 10px;
	} 
	.u-myActivity{
		width: 94%;
		margin: 0 auto;
		height: 90px;
		background-color: white;
		border-radius: 10px 10px 10px 10px;
	}
	.u-myGrid{
		margin: 0 auto;
		width: 94%;
		background-color: white;
		border-radius: 10px 10px 10px 10px;
	}
	.u-myMemberDetails{
		margin-top: 10px;
		width: 124%;
		height: 48px;
		background-color: #3e4053;
		border-radius: 0px 0px 20px 20px;
	}
	.u-myMemberIntroduce{
		width: 300px;
		margin-left: 14px;
		margin-top: 14px;
	}
	.u-myMemberContent{
		margin-left: 10px;
		margin-top: -10;
	}
	.u-myText{
		width: 200px;
	}
	.u-myAvatar{
		width: 50px;
		margin-left: 10px;
		margin-top: 5px;
	}
	.u-myMemberTop{
		margin: 0 auto;
		margin-top: 5px;
		width: 94%;
		height: 140px;
		background-color: #49465b;
		border-radius: 20px 20px 20px 20px;
	}
	.u-page{
		background-color: #eeeeee;
		height: 802px;
	}
	.grid-textActivity{
		font-size: 14px;
		color: #909399;
		padding: 20rpx 0rpx 20rpx 10rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 20rpx 0rpx 20rpx 40rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>
